<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" color="#000" size="36upx"></u-icon>
			</view>
			<view class="nav-title">个人资料</view>
			<view class="nav-right" @click="saveProfile">
				<text class="save-text">保存</text>
			</view>
		</view>

		<!-- 头像区域 -->
		<view class="avatar-section">
			<view class="avatar-container">
				<view class="avatar-bg">
					<view class="avatar-icon">
						<u-icon name="account-fill" color="#fff" size="100upx"></u-icon>
					</view>
				</view>
				<view class="camera-badge">
					<u-icon name="camera" color="#666" size="38upx"></u-icon>
				</view>
			</view>
		</view>

		<!-- 表单区域 -->
		<view class="form-box">
			<view class="form-section">
				<!-- 昵称 -->
				<view class="form-item">
					<text class="form-label">昵称</text>
					<text class="form-value">150****8355</text>
				</view>

				<!-- 账号ID -->
				<view class="form-item">
					<text class="form-label">账号ID</text>
					<text class="form-value">1070237</text>
				</view>

				<!-- 性别 -->
				<view class="form-item">
					<text class="form-label">性别</text>
					<u-radio-group v-model="profile.gender" @change="groupChange" class="gender-options">
						<u-radio label="男" labelSize="18" size="20" activeColor="#0194fe" iconSize="16"></u-radio>
						<u-radio label="女" labelSize="18" size="20" activeColor="#0194fe" iconSize="16"></u-radio>
					</u-radio-group>
				</view>

				<!-- 出生日期 -->
				<view class="form-item" @click="showDatePicker">
					<text class="form-label">出生日期</text>
					<text class="form-value placeholder">请选择</text>
				</view>

				<!-- 商铺-店铺 -->
				<view class="form-item">
					<text class="form-label">商铺-店铺</text>
					<text class="form-value">0-0</text>
				</view>
			</view>
		</view>


		<!-- 日期选择器 -->
		<u-datetime-picker :show="datePickerShow" v-model="datePickerValue" mode="date" @close="datePickerShow = false"
			@cancel="datePickerShow = false" @confirm="confirmDate"></u-datetime-picker>
	</view>
</template>

<script>
import {
	mapState,
	mapMutations
} from 'vuex';

export default {
	data() {
		return {
			profile: {
				nickname: '150****8355',
				gender: 'male',
				birthday: ''
			},
			datePickerShow: false,
			datePickerValue: Number(new Date())
		};
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad() {
		// 初始化用户信息
		this.initProfile();
	},
	methods: {
		// 初始化资料
		initProfile() {
			if (this.userInfo) {
				this.profile = {
					nickname: this.userInfo.nickname || '150****8355',
					gender: this.userInfo.gender || 'male',
					birthday: this.userInfo.birthday || ''
				};
			}
		},

		// 返回
		goBack() {
			uni.navigateBack();
		},

		// 保存资料
		saveProfile() {
			this.$api.msg('保存成功');
		},

		// 选择性别
		selectGender(gender) {
			this.profile.gender = gender;
		},

		// 显示日期选择器
		showDatePicker() {
			this.datePickerShow = true;
		},

		// 确认日期
		confirmDate(e) {
			const date = new Date(e.value);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			this.profile.birthday = `${year}-${month}-${day}`;
			this.datePickerShow = false;
		},

		// 更换头像
		changeAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.$api.msg('头像上传功能待实现');
				}
			});
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}

.container {
	background: #f6f6f6;
}

// 导航栏
.navbar {
	background: #fff;
	height: 88upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30upx;
	border-bottom: 1upx solid #eee;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: var(--status-bar-height);
	height: calc(88upx + var(--status-bar-height));

	.nav-left {
		width: 100upx;
	}

	.nav-title {
		font-size: 36upx;
		font-weight: 500;
		color: #000;
	}

	.nav-right {
		width: 100upx;
		text-align: right;

		.save-text {
			font-size: 32upx;
			color: #999;
		}
	}
}

// 头像区域
.avatar-section {
	background: #fff;
	padding: 120upx 0 100upx;
	display: flex;
	justify-content: center;
	box-shadow: 0 0 10upx 4upx rgba(0, 0, 0, 0.06);
	margin-top: calc(88upx + var(--status-bar-height));

	.avatar-container {
		position: relative;

		.avatar-bg {
			width: 160upx;
			height: 160upx;
			border-radius: 50%;
			background: #d9d9d9;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 6upx solid #fff;
			box-shadow: 0 0 10upx 4upx rgba(0, 0, 0, 0.06);

			.avatar-icon {
				.person-icon {
					font-size: 80upx;
					color: #fff;
				}
			}
		}

		.camera-badge {
			position: absolute;
			right: 6upx;
			bottom: -10upx;
			width: 56upx;
			height: 56upx;
			background: #f0f0f0;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
			border: 4upx solid #fff;

			.camera-icon {
				font-size: 28upx;
			}
		}
	}
}

// 表单区域
.form-box {
	padding: 30upx;

	.form-section {
		border-radius: 20upx;
		box-shadow: 0 0 8upx 4upx rgba(0, 0, 0, 0.06);
		background: #fff;
		padding: 0 30upx;

		.form-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 0;
			border-bottom: 2upx solid #eceaeb;

			&:last-child {
				border-bottom: none;
			}

			.form-label {
				font-size: 34upx;
				color: #383838;
				font-weight: 400;
			}

			.form-value {
				font-size: 34upx;
				color: #383838;
				text-align: right;

				&.placeholder {
					color: #ccc;
				}
			}

			// 性别选择
			.gender-options {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap: 80upx;

				.gender-option {
					display: flex;
					align-items: center;
					gap: 20upx;

					.radio-btn {
						width: 44upx;
						height: 44upx;
						border: 3upx solid #ddd;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						&.active {
							border-color: #007AFF;
							background: #007AFF;

							.radio-check {
								color: #fff;
								font-size: 24upx;
								font-weight: bold;
							}
						}
					}

					.gender-text {
						font-size: 34upx;
						color: #383838;
					}
				}
			}
		}
	}
}
</style>
